<template>
    <view class="message" :style="topRpx">
        <view :class="typeClass.main">
            <span :class="typeClass.mainData">{{ msg }}</span>
        </view>
        <span :class="typeClass.ouo">OUO</span>
    </view>
</template>

<script>
export default {
    name: "messageBox",
    data() {
        return {
            topRpx: "top:-120rpx",
            msg: "",
            type: 1,
            typeClass: {
                main: "message-main message-main-1",
                mainData: "message-main-data message-main-data-1",
                ouo: "message-ouo message-ouo-1"
            }
        }
    },
    methods: {
        showMsg(type, msg_) {
            if (type == 1) {
                this.typeClass = {
                    main: "message-main message-main-1",
                    mainData: "message-main-data message-main-data-1",
                    ouo: "message-ouo message-ouo-1"
                }
            } else {
                this.typeClass = {
                    main: "message-main message-main-2",
                    mainData: "message-main-data message-main-data-2",
                    ouo: "message-ouo message-ouo-2"
                }
            }
            this.msg = msg_;
                this.topRpx = "top:70rpx"
                setTimeout(() => {
                    this.topRpx = "top:-120rpx"
                }, 2000)
        }
    },
    mounted() {
        console.log('onload');
    },
}
</script>

<style scoped>
/* @import url("./../../static/font.css"); */
.message {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* top: 70rpx; */
    z-index: 10000;
    transition: all 0.5s;
    /* display: none; */
}

.message-main {
    /* width: 300rpx; */
    padding-left: 70rpx;
    padding-right: 100rpx;
    height: 64rpx;
    display: block;
    border-radius: 25rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message-main-1 {
    background-color: #E64240;
    border: #E64240 3rpx solid;
}

.message-main-2 {
    background-color: #fff;
    border: #318BF7 5rpx solid;
}

.message-main-data {
    letter-spacing: 10rpx;
    font-family: Smiley Sans;
    font-size: 32rpx;
    white-space: nowrap;
}

.message-main-data-1 {
    color: white;
}

.message-main-data-2 {
    color: #318BF7;
}

.message-ouo {
    font-weight: 100;
    font-family: Dotties Chocolate;
    font-size: 20rpx;
    white-space: nowrap;
    position: absolute;
    bottom: 16rpx;
    right: 20rpx;
    letter-spacing: 4rpx;
}

.message-ouo-1 {
    color: white;
}

.message-ouo-2 {
    color: #318BF7;
}
</style>